@import "utils"
@import "colors"

=image($path, $width, $heigth)
  background: url($path)
  background-size: $width $heigth
  display: inline-block
  width: $width
  height: $heigth

.brand
  +image("assets/tldr.svg", 105px, 30px)

.brand.small
  +image("assets/tldr.svg", 52px, 15px)
  position: relative
  top: 3px

.github-iframe
  border: 0

nav
  +reset
  height: 64px
  border-bottom: 1px solid $outline

  .content
    +reset
    +adaptive("margin", 0 20px, 0 auto, 0 auto)
    +adaptive("max-width", 300px, 720px, 720px)

  .brand-and-version, .search, .github-stars
    float: left

  .search
    +adaptive("max-width", 100px, 200px, 400px)

  .github-stars
    margin: 16px 0px
    width: 10px
    +adaptive("display", none, inherit, inherit)

  a.brand
    margin-top: 16px

  a.version
    font-variant: normal
    font-size: 0.2em
    position: relative
    left: 30px
    bottom: 3px
    display: block

  input
    margin-top: 12px
    +adaptive("margin-left", 5px, 30px, 30px)

    height: 38px
    +adaptive("width", 165px, 220px, 220px)
    +adaptive("max-width", 165px, 60%, 60%)

    border: 1px solid $outline
    border-radius: 0px

    font-size: 16pt
    +adaptive("padding", 0px 6px, 0px 12px, 0px 12px)

    &:focus
      outline-color: $outline
